﻿@model Siser.Web.Models.ClaseInfoReporte

@{
    ViewBag.Title = "PrevisualizarReporte";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

@*Validación de usuario, para que no se pueda acceder a la página sin estar logueado *@
@if (@User.Identity.Name == "")
{
    Layout = null;
    <div style="width:800px; font-size:2em; height:500px; text-align:center; margin-top:100px" class="division">
    @Html.ActionLink("Ingrese como usuario válido...", "InicioSesion", "Cuenta")
    </div>
}
else
{
<h2>PrevisualizarReporte</h2>

    using (Ajax.BeginForm("PrevisualizarReporte", "ReporteController", new AjaxOptions { UpdateTargetId = "chart1" }))
    {
<fieldset>
<div class="editor-label">Fecha inicio</div>
<div class="editor-field"> @Html.EditorFor(model => model.fechaInicio) </div>

<div class="editor-label">Fecha fin</div>
<div class="editor-field">@Html.EditorFor(model => model.fechaFin) </div>

<div class="editor-label">Id Equipo</div>
<div class="editor-field">@Html.EditorFor(model => model.equipo_id) </div>
    
 </fieldset>   
 <p>
    <input type="submit" value="Previsualizar Grafico" />
</p>
    }

<div id="prueba" style=" padding-left:30px; height:400px; width:800px; float:left">

    <div id="chart1" style="height:400px; width:600px;"></div>
    </div>

<script type="text/javascript" src="../../Scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../Content/jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="../../Content/examples.min.css" />
<script type="text/javascript" src="../../Scripts/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqplot.highlighter.min.js"></script>



<script type="text/javascript">
  $(document).ready(function () {
    var goog;
    goog = @Html.Raw(ViewBag.datos);

    var plot1 = $.jqplot('chart1', [goog], {
        grid: {
            drawBorder: false,
            shadow: false,
            background: 'rgba(0,0,0,0)'
        },
        highlighter: { show: true },
        seriesDefaults: { 
            shadowAlpha: 0.1,
            shadowDepth: 2,
            fillToZero: true
        },
        series: [
            {
                color: 'rgba(50,50,50,2)',
                negativeColor: 'rgba(50,50,50,2)',
                showMarker: true,
                showLine: true,
                fill: true,
                fillAndStroke: false,
                markerOptions: {
                    style: 'filledCircle',
                    size: 8
                },
                rendererOptions: {
                    smooth: true
                }
            },
            {
                color: 'rgba(01, 01, 01, 0.7)',
                showMarker: true,
                rendererOptions: {
                    smooth: true,
                },
                markerOptions: {
                    style: 'filledSquare',
                    size: 8
                },
            }
        ],
        axes: {
                xaxis: {
                label:'Periodo',
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: "%Y/%#m/%#d %#H:%#M:%#S"}
                },
                yaxis: {
                min:0,
                label:'@ViewBag.nombre_unidad',
                    // renderer: $.jqplot.LogAxisRenderer,
                    tickOptions: { prefix: '' }
                    
                }
            }
           
    });
 $("#botonsel").click(function (){
 alert("click");
 var btn=$("#botonsel");
 btn.bind('click', { chart: $("#chart1") }, function (evt) {
                    //alert(evt.data.chart.jqplotToImageStr());
                    $("#asdf").attr('value', evt.data.chart.jqplotToImageStr());
                });
 });
 
});
</script>

<script type="text/javascript">
    $(document).ready(function () {

        if (!$.jqplot.use_excanvas) {
            $('div.jqplot-target').each(function () {
                // Add a view image button
                var btn = $(document.createElement('button'));
                btn.text('View as PNG');
                btn.bind('click', { chart: $(this) }, function (evt) {
                    //alert(evt.data.chart.jqplotToImageStr());
                    $("#imagen_grafico").attr('value', evt.data.chart.jqplotToImageStr());
                });
                $(this).after(btn);

                // add a save image button
                // btn = $(document.createElement('button'));
                //btn.text('Save as PNG');
                //btn.bind('click', { chart: $(this) }, function (evt) {
                //   evt.data.chart.jqplotSaveImage();
                // });
                // $(this).after(btn);
                btn = null;
            });
        }

        $('#chart1').CanvasHack();
    });




</script>
}